<template>
    <div>
        <div class="box boxstyle">
            <div >        
                <div v-for="(item, index) in echatData" :key="index">
                    <div style="margin-bottom: 6px;font-size:13px;color:#a7a3a3">
                        <span>{{item.sender_type === "0" ? "客服 - " +(item.user_real_name? item.user_real_name
                        : item.from_id) : "患者" }}</span>
                        <span style="margin-left:20px">{{item.receive_time}}</span>
                    </div>
                    <img @click="seeBIg(item.message)" style="width: 100px;object-fit: cover;" v-if="item.message.startsWith('https://')" :src=" item.message" alt="">
                    <div v-else style="font-weight:600;width:300px;word-break:break-all ">{{item.message}}</div>
                </div>
            </div> 
            <div class="noContent" v-if="echatData.length=0">暂无数据</div>
            <Spin size="large" fix v-if="spinLoading"></Spin>
        </div>
        <!-- page -->
    </div>
</template>
<script>
    import dayjs from 'dayjs';
    import { mapState } from 'vuex';
    import { EweCharts } from '@/api/hqapi';
    export default {
        name: 'chartList',
        computed: {
            ...mapState('chatwebsocket/wechat', ['patientInfo'])
        },
        data () {
            return {
                page: 1,
                limit: 1000,
                echatData: [],
                spinLoading: false,
            };
        },
        filters: {
            timeFormat(data) {
                return dayjs(data.created_at * 1000).format('YYYY-MM-DD');
            },
        },
        methods: {
            seeBIg(item) {
                this.src = item;
                this.imgModel = true;
            },
            initData () {
                console.log('initData');
                this.getEweCharts();  
            },
            getEweCharts () {
                this.spinLoading = true;
                EweCharts({
                    page: this.page,
                    pageSize: this.limit,
                    patient_user_id: this.patientInfo.id
                }).then(res => {
                    console.log('res', res);
                    this.echatData = res.list;
                    this.spinLoading = false;
                });
            },
            changePage(current) {
                this.page = current;
                this.getgetEweCharts();
            }
        },
    };
</script>
<style lang="less" scoped>
    .box {
        position: relative;
        /deep/.ivu-spin-fix {
            right:0px;
            z-index:9999;
        }
    }
    @media only screen and (max-width: 1280px) {
        .boxstyle {
            max-height:80px;
            overflow: auto;
        }
    }
    @media only screen and (min-width: 1281px) and (max-width: 1440px) {
        .boxstyle {
            max-height:180px;
            overflow: auto;
        }
    }
    @media only screen and (min-width:1441px) {
        .boxstyle {
            max-height:370px;
            overflow: auto;
        }
    }
    .noContent {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>